.d1{
    width: 800px;
    height: 300px;
    background: #ccc;
    margin:0 auto;

    h1{
        text-align: center;
        height: 80px;
        line-height: 80px;
    }

    p{
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        a{
            text-decoration: none;
            color: white;
            margin-left: 20px;
            &:hover{ // 使用&符号在 选择器内部用于指向父级选择器名称
                text-decoration: underline;
                color: #ff7300;
            }
        }
    }
}

/*
    继承，有两种写法
*/ 
.a{
    color: red;
    font-size: 20px;
}
.a span{
    font-style: italic;
    font-family: 楷体;
}
.a h2{
    background-repeat: no-repeat;
    background-position: center right;
}
.c{
    font-weight: bold;  
    text-indent: 10px;
    overflow: hidden;
    background-size: cover;
}

// 写法1
// .b:extend(.a){
//     background: #ccc;
//     text-decoration: underline;
// }
// 写法2
.b{
    background: #ccc;
    text-decoration: underline;
    &:extend(.a all, .c); // 多继承，以逗号隔开
}

